<style lang="less">
@import "./home.less";
@import "../../styles/common.less";
</style>

<template>
  <div>
    <div v-show="currNav == 'xboot'" class="home">
      <Row :gutter="10">
        <Col :lg="24" :xl="8">
          <Row :gutter="10">
            <Col :lg="12" :xl="24" :style="{ marginBottom: '10px' }">
              <Card>
                <Row type="flex" class="user-info">
                  <Col span="8">
                    <Row
                      class-name="made-child-con-middle"
                      type="flex"
                      align="middle"
                    >
                      <img class="avator-img" :src="avatarPath" />
                    </Row>
                  </Col>
                  <Col span="16" style="padding-left: 6px">
                    <Row
                      class-name="made-child-con-middle"
                      type="flex"
                      align="middle"
                    >
                      <div>
                        <b class="card-user-info-name">{{ username }}</b>
                        <p>您好，甜窝 欢迎您的使用</p>
                      </div>
                    </Row>
                  </Col>
                </Row>
                
              </Card>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
    <div v-show="currNav == 'app'">
      <dashboard2 />
    </div>
  </div>
</template>

<script>
import { ipInfo } from "@/api/index";
import visitVolume from "./components/visitVolume.vue";
import visitSeparation from "./components/visitSeparation.vue";
import infoCard from "./components/infoCard.vue";
import dashboard2 from "../xboot-charts/dashboard2/dashboard2.vue";
import Cookies from "js-cookie";
import "gitalk/dist/gitalk.css";
import Gitalk from "gitalk";
export default {
  name: "home",
  components: {
    visitVolume,
    visitSeparation,
    infoCard,
    dashboard2,
  },
  data() {
    return {
      count: {
        createUser: 496,
        visit: 3264,
        collection: 24389305,
        transfer: 39503498,
      },
      city: "",
      username: "",
    };
  },
  computed: {
    currNav() {
      return this.$store.state.app.currNav;
    },
    avatarPath() {
      return localStorage.avatorImgPath;
    },
  },
  methods: {
    init() {
      let userInfo = JSON.parse(Cookies.get("userInfo"));
      this.username = userInfo.nickname;
      ipInfo().then((res) => {
        if (res.success) {
          this.city = res.result;
        }
      });
    },
    showNotice() {
      getNotice().then((res) => {
        if (res.success) {
          if (!res.result) {
            return;
          }
          let data = res.result;
          if (
            data.open &&
            (data.title || data.content) &&
            data.position == "HOME"
          ) {
            this.$Notice.info({
              title: data.title,
              desc: data.content,
              duration: data.duration,
            });
          }
        }
      });
    },
  },
  mounted() {
    this.init();
    // Gitalk
    var gitalk = new Gitalk({
      clientID: "a128de2dd7383614273a",
      clientSecret: "a77691ecb662a8303a6c686ae651ae035868da6e",
      repo: "xboot-comments",
      owner: "Exrick",
      admin: ["Exrick"],
      distractionFreeMode: false, // 遮罩效果
    });
    gitalk.render("comments");
    // 宣传视频
    let videoFlag = "videoShowed";
    let xbootVideo = Cookies.get(videoFlag);
  },
};
</script>